<style>
._title {
	text-align: center;
	font-size: 36px;
}
.LOGIN {
	line-height: normal;
	alignment-adjust:middle;
}
</style>
<table width="200" border="0" align="center">
  <tr>
    <td class="_title"><table width="393" border="0">
      <tr>
        <td width="130"><img src="/public/images/logo.jpg" width="130" height="149" /></td>
        <td class"_title" width="253">Bird Game APP</td>
      </tr>
    </table></td>
  </tr>
</table>

<p>&nbsp;</p>
<div id="registration_form">
<h1 style="text-align: center; color: #666;">Registration</h1>
<table width="115" border="0" align="center">
  <tr>

    <td width="109">  
  <p class="LOGIN">Email: 
      <input type="text" value="" size="15" id="email" />
    <br>
    Password:
    <input type="password" value="" size="15" id="password" />
</p>
  <span class="LOGIN"><span class="LOGIN">
  <input type="submit" class="LOGIN" value="Join" id="submit" />
  </span>
  </span>
    </td>
  </tr>
</table>
<p id="error_message"></p>
</div>
<p>&nbsp;</p>
<script>
	$(document).ready(function() {
		$("#submit").click(function() {
			var email = $("#email").val();
			var password = $("#password").val();
			password = $.sha256(password);
			$.ajax("/registration/new-registration", {
				data: "email=" + escape(email) + "&password=" + escape(password),
				beforeSend: function(jqXHR, settings) {
					$("#submit").attr("disabled", "disabled");
				},
				complete: function(jqXHR, textStatus) {
					$("#submit").removeAttr("disabled");
				},
				success: function(data, textStatus, jqXHR) {
					
				}
			});
		});
	});
</script>